{% extends "indexbase.html" %}
{%block register_selected %}class="selected"{%endblock%}
{% block left_content %}

<div class="title"><span class="title_icon"><img src="/site_media/frontend/images/bullet1.gif" alt="" title="" /></span>Register</div>
        
        	<div class="feat_prod_box_details">
            <p class="details">
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.
            </p>
            
              	<div class="contact_form">
                <div class="form_subtitle">create new account</div>
                 <form name="register" id ="register" action="" method ="post" > {% csrf_token %}
                    <div class="form_row">
                    <label class="contact" ><strong>Username:</strong></label>
                    <input  class="contact_input" type="text"  name ="username"  />
                    </div>  

	
                    <div class="form_row">
                    <label class="contact"><strong>Password:</strong></label>
                    <input type="password" class="contact_input" name ="password1"  />
                    </div> 
					
					<div class="form_row">
					<label class="contact"><strong>Confirm Password:</strong> </label> <input
						type="password" class="contact_input" name="password2" />
					</div>
					
                    <div class="form_row">
                    <label class="contact"><strong>Email:</strong></label>
                    <input type="text" class="contact_input" name ="email"  />
                    </div>


                    <div class="form_row">
                    <label class="contact"><strong>Phone:</strong></label>
                    <input type="text" class="contact_input" name ="phone" />
                    </div>
                    
                    <div class="form_row">
                    <label class="contact"><strong>Company:</strong></label>
                    <input type="text" class="contact_input" name ="company" />
                    </div>
                    
                    <div class="form_row">
                    <label class="contact"><strong>Address:</strong></label>
                    <input type="text" class="contact_input" name ="address" />
                    </div>                    

                    <div class="form_row">
                        <div class="terms">
                        <input type="checkbox" name="terms" />
                        I agree to the <a href="#">terms &amp; conditions</a>                        </div>
                    </div> 

                    
               
					<div class="errorValidate" style="color: #a53d17;"></div>
                    <div class="form_row">
                    <input type="submit" class="register" value="register" />
                    </div>   
                  </form>     
                </div>  
            
          </div>	

<script type="text/javascript">
$(document).ready(function(){
	
	
	$.validator.addMethod(
	        "regexp",
	        function(value, element, regexp) {
	            var check = false;
	            var re = new RegExp(regexp);
	            return this.optional(element) || re.test(value);
	        },
	        "Please check your input."
	);
    $("#register").validate({
    	rules: {
			username: { required: true, regexp: "^[a-zA-Z][a-zA-Z0-9]*$"  },
			password1: { required: true },
			password2: { required: true, equalTo: 'input[name="password1"]' },
			email: { required :true, email: true },
			phone: { digits: true },
			terms: { required: true }
		},
		messages: {
			username: {
				required: "Please enter your desired username.<br/>",
				regexp: "Please choose an valid username.<br/>",
			},
			password1: {
				required: "Please enter your password.<br/>",				
			},
			password2: {
				required: "Please confirm your password.<br/>",
				equalTo:  "Passwords did not match.<br/>",
			},
			email: {
				required: "Please enter your email.<br/>",
				email: "Please use a valid email format.<br/>",
			},
			phone: {
				digits: "Please use a valid phone number.<br/>",
			},
			terms: {
				required: "Please accept terms of use to register.<br/>",
			}
		},
		errorPlacement: function(error, element){
		         // $("div.errorValidate").html(error);
				$("div.errorValidate").append(error);
		},
		submitHandler: function(form) {
			if ($("input[name='fullname']").attr("disabled")){
				$("input[name='fullname']").removeAttr("disabled");
			}
			if ($("input[name='email']").attr("disabled")){
				$("input[name='email']").removeAttr("disabled");					
			}
			
		    form.submit();
		   	//return true;
		},
    });
  });
</script>

		  
{%endblock%}